<template>
  <div class="profile">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="个人中心" class="nav-bar" />

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <van-cell-group inset>
        <van-cell center class="user-info">
          <template #icon>
            <van-image
              round
              width="64"
              height="64"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </template>
          <template #title>
            <div class="user-name">访客用户</div>
            <div class="user-id">ID: 10086</div>
          </template>
          <template #right-icon>
            <van-button size="small" plain type="primary" icon="edit" @click="onEdit">编辑</van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 功能列表 -->
    <div class="feature-list">
      <van-cell-group inset title="常用功能">
        <van-cell title="我的预约" icon="calendar-o" is-link @click="$router.push('/visitor-appointment')" />
        <van-cell title="访问记录" icon="clock-o" is-link @click="$router.push('/visit-history')" />
        <van-cell title="通知设置" icon="bell" is-link />
      </van-cell-group>

      <van-cell-group inset title="其他设置">
        <van-cell title="隐私设置" icon="shield-o" is-link />
        <van-cell title="帮助中心" icon="question-o" is-link />
        <van-cell title="关于我们" icon="info-o" is-link />
      </van-cell-group>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-button">
      <van-button block type="danger" @click="onLogout">退出登录</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProfileView',
  methods: {
    onEdit() {
      this.$toast('编辑个人信息');
    },
    onLogout() {
      this.$dialog.confirm({
        title: '确认退出',
        message: '是否确认退出登录？',
      }).then(() => {
        // 执行退出登录逻辑
        this.$toast('已退出登录');
      }).catch(() => {
        // 取消退出
      });
    }
  }
}
</script>

<style scoped>
.profile {
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 20px;
}

.user-card {
  margin: 16px 0;
}

.user-info {
  padding: 20px 16px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.user-id {
  font-size: 14px;
  color: #969799;
}

.feature-list {
  margin: 16px 0;
}

.logout-button {
  margin: 16px;
}
</style>